<template>
  <view class="department">
    <u--input v-model="treeName" :placeholder="placeholder" suffix-icon="search" readonly @click="show"/>
    <tree-select-popup
      ref="tree" :list="listData" :fold-all="true" range-key="name" select-parent @confirm="confirm"
      @cancel="cancel"/>
  </view>
</template>

<script>
import TreeSelectPopup from '@/components/TreeSelect/treeSelectPopup'

export default {
  name: 'TreeSelect',
  components: {
    TreeSelectPopup
  },
  props: {
    modelValue: {
      type: String,
      default: undefined
    },
    rules: {
      type: Array,
      default: function () {
        return []
      }
    },
    list: {
      type: Array,
      default: function () {
        return []
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    placeholder: {
      type: String,
      default: '请选择. . .'
    },
    headline: {
      type: String,
      default: '请选择目标'
    }
  },
  data() {
    return {
      listData: [],
      treeName: ''
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler() {
        this.syncData()
      }
    },
    list: {
      immediate: true,
      handler() {
        this.listData = this.list
        this.syncData()
      }
    }
  },
  methods: {
    syncData() {
      this.treeName = undefined
      if (this.isNull(this.modelValue) || this.isNull(this.listData)) {
        return
      }
      this.findName(this.listData)
      // this.Fullselect2(this.listData, this.modelValue)
    },
    findName(list) {
      list.find(item => {
        if (item.id === this.modelValue) {
          this.treeName = item.name
          return true
        }
        if (item.children.length !== 0) {
          const ret = this.findName(item.children)
          if (!this.isNull(ret)) {
            return true
          }
        }
      })
    },
    // 部门
    show() {
      this.$refs.tree.show(this.modelValue)
    },
    // 确定回调事件
    confirm(e) {
      this.treeName = e[0].name
      this.$emit('update:modelValue', e[0].id)
    },
    // 取消回调事件
    cancel() {
      this.$refs.tree.hide()
    },
    // 递归回显已选择的部门
    Fullselect2(data, namedata) {
      if ((!data || data.length === 0) || (!namedata || namedata.length === 0)) {
        return
      }
      data.forEach(item => {
        this.Fullselect2(item.children, namedata)
        if (item.children && item.children.length > 0) {
          item.children.forEach(j => {
            if (namedata === j.id) {
              j.checked = true
            }
          })
        } else if (item.children.length === 0) {
          if (namedata === item.id) {
            item.checked = true
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.department {
  width: 100%;

  :deep(.u-input) {
    height: 38px;
    padding: 0 !important;
    padding-left: 9px !important;
    overflow: hidden;
  }

  :deep(.u-input__content) {
    width: 100% !important;
    height: 100% !important;
  }

  :deep(.u-input__content__subfix-icon) {
    background-color: $u-primary;
    color: #fff !important;
    width: 38px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.u-icon__icon ) {
    color: #fff !important;
  }
}
</style>
